import React, { Component } from "react";
import "./Payment.scss";
import { Toast } from "antd-mobile";
class Payment extends Component {
  // "iconfont icon-xuanzhongyuandian":"iconfont icon-xuanzhong"
  handleVxPay = (params) => {
    let vxButton = document.getElementById("vxButton");
    let zfbButton = document.getElementById("zfbButton");
    vxButton.setAttribute("class", "iconfont icon-xuanzhong");
    zfbButton.setAttribute("class", "iconfont icon-xuanzhongyuandian");
  };
  handleZfbPay = (params) => {
    let vxButton = document.getElementById("vxButton");
    let zfbButton = document.getElementById("zfbButton");
    vxButton.setAttribute("class", "iconfont icon-xuanzhongyuandian");
    zfbButton.setAttribute("class", "iconfont icon-xuanzhong");
  };
  quickpay = (params) => {
    let vxButton = document.getElementById("vxButton");
    if (vxButton.className === "iconfont icon-xuanzhong") {
      Toast.info("微信支付链接中...");
    } else {
      Toast.info("支付宝支付链接中...");
    }
  };
  componentDidMount() {
    //获取地址栏中订单编号
    // console.log(this.props.location.search)
    let search = this.props.location.search;
    let urlOrderNumber1 = search.split("=")[1].split("&")[0];
    // console.log(urlOrderNumber1)
    //获取地址栏中的价格
    let urlOrderPrice1 = search.split("=")[2]
    this.setState({
      urlOrderNumber: urlOrderNumber1,
      urlOrderPrice:urlOrderPrice1
    });
  }
  state = {
    urlOrderNumber: 0,
    urlOrderPrice:0,
  };
  render() {
    return (
      <div className="appPayment">
        <div className="appPaymentTitle">收银台</div>
        <div className="appPaymentMessage">
          <div className="orderNumber">
            <div className="orderNumberLeft">订单编号</div>
            <div className="orderNumberRight">{this.state.urlOrderNumber}</div>
          </div>
          <div className="orderPrice">
            <div className="orderPriceLeft">应付金额</div>
            <div className="orderPriceRight">￥{this.state.urlOrderPrice/100}.00</div>
          </div>
        </div>
        <div className="appPaymentPath">
          <div className="vxPay" onClick={this.handleVxPay}>
            <div className="vxPayLeft">
              <img
                src="http://linjiashop.microapp.store/img/wxpay.96acac05.png"
                alt=""
              />
            </div>
            <div className="vxPayRight">
              <span id="vxButton" className="iconfont icon-xuanzhong"></span>
            </div>
          </div>
          <div className="zfbPay" onClick={this.handleZfbPay}>
            <div className="zfbPayLeft">
              <img
                src="http://linjiashop.microapp.store/img/alipay.41a79780.png"
                alt=""
              />
            </div>
            <div className="zfbPayRight">
              <span
                id="zfbButton"
                className="iconfont icon-xuanzhongyuandian"
              ></span>
            </div>
          </div>
        </div>
        <div className="appPaymentBottom" onClick={this.quickpay}>
          立即支付
        </div>
      </div>
    );
  }
}

export default Payment;
